<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<style>
			.mui-table-view {
				background-color: #efeff4;
			}
			
			.mui-table-view:before,
			.mui-table-view:after {
				display: none;
			}
			
			a.mui-card {
				display: block;
				position: relative;
				border-radius: 5px;
				background-color: #FFFFFF;
			}
			
			.mui-card h6 {
				font-size: 20px;
				color: #333333;
			}
			
			.mui-card p {
				color: #333333;
				margin: 8px;
			}
			
			.mui-card p.card-num {
				font-size: 20px;
			}
			
			.mui-card i.iconfont {
				position: absolute;
				top: 17px;
				right: 0;
				font-size: 50px;
				color: #FEB406;
				opacity: .7;
			}
			
			.mui-popover.mui-popover-action .mui-table-view {
				color: #333333;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-back mui-icon-left-nav mui-pull-left"></a>
			<a class="mui-pull-right">添加账户</a>
			<h1 class="mui-title">常用账户</h1>
		</header>
		<div class="mui-content">
			<ul class="mui-table-view" id="card-list">
				<!--<a class="mui-table-view-cell mui-card" href="#actionArea">
					<h6>中国建设银行</h6>
					<p>储蓄卡</p>
					<p class="card-num">
						****&nbsp;****&nbsp;****&nbsp;1520
					</p>
					<i class="iconfont">&#xe60e;</i>
				</a>-->
			</ul>
			<div id="actionArea" class="mui-popover mui-popover-action mui-popover-bottom">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell setmain">
						<a href="#">设为主卡</a>
					</li>
					<li class="mui-table-view-cell unband">
						<a href="#" style="color: #FF3B30;">解绑此卡</a>
					</li>
				</ul>
			</div>
		</div>

	</body>
	<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/user.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var cardList = document.getElementById("card-list");
		mui.plusReady(function() {
			getData();

			//监听add-account.html的addaccount事件
			document.addEventListener('reload', function() {
				getData();
			})
			
			var cardId;
			// 银行卡操作
			mui(cardList).on('tap', '.mui-table-view-cell', function() {
				cardId = this.id;
				if(this.isMain) {
					$(".setmain").hide();
				}
			});
			
			mui('#actionArea').on('tap', '.mui-table-view-cell', function() {
				mui('#actionArea').popover('hide');
				var url, confirmText;
				if($(this).hasClass('setmain')) { // 设为主卡
					confirmText = '确认将此卡设为主卡？';
					url = baseURL + 'account/setMasterCard/' + cardId + '.json';
				} else if($(this).hasClass('unband')) { // 解绑
					confirmText = '确认解绑此卡？';
					url = baseURL + 'account/unbandCard/' + cardId + '.json';
				}
				console.log(url);
				plus.nativeUI.confirm(confirmText, function(e) {
					if(!e.index) {
						Common.ajax({
							url : url
						}, function(data) {
							console.log(JSON.stringify(data));
							if(data.code == 1) {
								mui.toast('操作成功');
								plus.webview.currentWebview().reload();
							}
						}, function(xhr) {
							mui.toast('网络异常，请稍后再试');
							console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
						})
					}
				}, '', ["确定", "取消"]);
			})
			
			function getData() {
				Common.ajax({
					url : baseURL + 'account/bandCardList.json'
				}, function(data) {
					cardList.innerHTML = '';
					console.log(JSON.stringify(data));
					switch (data.code){
						case '1':
							var data = data.cardList;
							for(var i = 0; i < data.length; i++) {
								createCardList(data[i].accountCardId, data[i].isMaster, data[i].bank,
									'储蓄卡', data[i].cardNo);
							}
							break;
						case '0':
						case '-2':
							Common.showState(cardList, '&#xe608;', '您尚未添加账户', 50);
							break;
						case '-1':
							mui.toast('加载失败，请稍后再试');
							break;
						default:
							break;
					}
				}, function(xhr) {
					Common.linkError();
					console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
				})
			}
		})

		/**
		 * @param {Object} id			银行卡id
		 * @param {Object} isMain		是否是主卡
		 * @param {Object} title		银行名称
		 * @param {Object} type			银行卡类型
		 * @param {Object} num			银行卡号
		 */
		function createCardList(id, isMain, title, type, num) {
			var item = document.createElement('a');
			item.className = 'mui-table-view-cell mui-card';
			item.href = '#actionArea'
			item.id = id;
			item.isMain = !isMain;
			var str = '<h6>' + title + '</h6><p>' + type + '</p>';
			str += '<p class="card-num">' + num + '</p>';
			if(isMain) {
				str += '<i class="iconfont">&#xe60e;</i>';
			}
			item.innerHTML = str;
			cardList.appendChild(item);
		}

		mui('header').on('tap', '.mui-pull-right', function() {
			Common.openWindow('add-account.html');
		})
	</script>

</html>